<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="充值页面" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <el-form
        autocomplete="on"
        :model="recharge"
        ref="recharge"
        label-position="left"
        :rules="rules"
      >
        <h2>用户充值</h2>
        <router-link to="/rechargeInfo" style="width:20px;margin-left: 80%;">
          <el-link icon="el-icon-edit" style="font-size: 18px">充值记录</el-link>
        </router-link>
        <el-form-item prop="Money">
          <el-input
            name="CustomerId"
            type="text"
            v-model="recharge.Money"
            autocomplete="on"
            placeholder="请输入金额"
            clearable
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;font-size: 18px">金额</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="PassWord">
          <el-input
            name="PassWord"
            type="text"
            v-model="recharge.PassWord"
            autocomplete="on"
            placeholder="请输入密码"
            clearable
            show-password
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;font-size: 18px">密码</div></template>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px;">
          <el-button
            style="width: 40%;background: darkslateblue;font-size: 18px"
            type="primary"
            :loading="loading"
            @click.native.prevent="R1charge"
          >充值
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        rules: {
          Money: [{required: true, message: '金额不能为空', trigger: 'blur'}],
          PassWord: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        recharge: {
          Money: "",
          PassWord: ""
        },
      };
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      R1charge() {
        this.$refs.recharge.validate(valid => {
          if (valid) {
            if(this.recharge.Money<=0){
              this.$alert("请输入正确的金额!", '提示', {
                confirmButtonText: '确定'
              });
            }
            else {
              let list = {
                Money: this.recharge.Money,
                PassWord: this.recharge.PassWord,
                Id: this.$store.state.customerId,
                Date: this.addDate()
              };
              this.$confirm('是否确认充值?', '提示', {}).then(() => {
                this.$axios.post('/user/recharge', list)
                  .then(resp => {
                    if (resp.data.code == 200) {
                      this.$alert("充值成功!", '提示', {
                        confirmButtonText: '确定'
                      });
                      this.$router.go(-1);
                    } else {
                      this.$alert(resp.data.msg, '提示', {
                        confirmButtonText: '确定'
                      });
                    }
                  })
              }).catch(() => {
                this.$message({
                  message: '取消充值',
                  type: 'failed'
                })
              });
            }
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
        },
      addDate() {
        let nowDate = new Date();
        let date1 = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        };
        if (date1.month >= 1 && date1.month <= 9) {
          date1.month = "0" + date1.month;
        }
        if (date1.date >= 0 && date1.date <= 9) {
          date1.date = "0" + date1.date;
        }
        let systemDate = date1.year + '-' + date1.month + '-' + date1.date;
        return systemDate;
      },
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    margin-top: 11%;
    margin-left: 38%;
    padding: 1em;
    max-width: 26em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }
</style>
